<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoBody :list="readerList" @del="del" @all="all"></TodoBody>
    <TodoFooter 
    :sum="sum" 
    @change="change" 
    :type="type"
    :isShow="isShow"
    @delAll="delAll"
    ></TodoFooter>
  </section>
</template>

<script>
// 引入
import TodoHeader from './components/TodoHeader.vue'
import TodoBody from './components/TodoBody.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  components: {
    TodoHeader,
    TodoBody,
    TodoFooter,
  },
  data() {
    return {
      list: [
        { id:1, name: '读万卷书', flag: true },
        { id:2, name: '行万里路', flag: false },
      ],
      type:'all',
    }
  },
  methods: {
    add(name) {
      this.list = [...this.list, { id:+new Date(), name, flag: false }]
    },
    del(id) {
      this.list=this.list.filter(item=>item.id !== id)
    },
    change(num){
      this.type = num
    },
    delAll(){
      this.list=this.list.filter(item=>!item.flag)
    },
    all(){
      this.list.forEach(item=>item.flag=true)
    }
  },
  computed:{
    isShow(){
      return this.list.some(item=>item.flag)
    },
    sum(){
      return this.list.filter(item=>!item.flag).length
    },
    readerList(){
    switch(this.type){
      case'all':
      return this.list
      case'active':
      return this.list.filter(item=>!item.flag)
      case'completed':
      return this.list.filter(item=>item.flag)
      default :
      return this.list
    }
    }
  },
}
</script>

<style></style>
